import { FC } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Button } from "antd";
import styled from "styled-components";
import { increase, decrease } from "@/store/demo/count";
import type { StateType } from "@/store";
import { useTitle } from "ahooks";
import TodoList from "./TodoList";

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 20px;
`;
const ReduxDemo: FC = () => {
  useTitle("Demo-Redux-TodoList");
  const count = useSelector<StateType>((state) => state.count);
  const dispatch = useDispatch();

  return (
    <Wrapper>
      <div>
        <Button size="small" type="primary" onClick={() => dispatch(decrease())}>
          -
        </Button>
        &nbsp;
        <span>
          <span>Count:</span>
          <>{count}</>
        </span>
        &nbsp;
        <Button size="small" onClick={() => dispatch(increase())}>
          +
        </Button>
      </div>
      <div>
        <TodoList />
      </div>
    </Wrapper>
  );
};

export default ReduxDemo;
